import React, { PureComponent } from 'react'

import { Button } from 'antd'

import store from '../store'
import {addAction, subAction} from '../store/actionCreators'

export default class Home extends PureComponent {
  constructor(props){
    super(props)
    this.state = {
      counter: store.getState().counter
    }
  }

  componentDidMount(){
    // 订阅赋值后界面才会改变
    this.onsubscribe = store.subscribe(() => {
      this.setState({counter: store.getState().counter})
    })
  }

  componentWillUnmount(){
    this.onsubscribe()
  }


  render() {
    return (
      <div>
        Home
        <h3>当前计数: {this.state.counter}</h3>
        <Button type="primary" onClick={() => store.dispatch(addAction(5))}>+5</Button>
        <Button type="primary" onClick={() => store.dispatch(subAction(5))}>-5</Button>
      </div>
    )
  }
}
